<template>
  <div class="my-agents">
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row>
      <el-form :model="searchForm" size="small" ref="search" inline>
        <el-form-item v-if="is_sub">
          <el-button type="primary" size="small" icon="el-icon-plus" @click="()=>{this.$router.push({name: 'addAgents'})}">添加代理</el-button>
        </el-form-item>
        <el-form-item label="代理商名称" prop="agent_name">
          <el-select v-model="searchForm.agent_name" filterable clearable placeholder="全部">
            <el-Option v-for="(item,index) in name" :value="item.agent_num" :label="item.agent_name" :key="index">{{ item.agent_name }}</el-Option>
          </el-select>
        </el-form-item>
        <el-form-item label="代理商编号" prop="sn">
          <el-input placeholder="输入代理商编号" name="agent_id" v-model="searchForm.sn"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input placeholder="输入联系电话" v-model="searchForm.phone" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="agent_status">
          <el-select placeholder="全部" v-model="searchForm.agent_status" name="agent_status" clearable>
            <el-option v-for="(item,index) in status" :label="item.status" :value="item.code" :key="index">{{ item.status }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="success" size="small" @click="search">查询</el-button>
          <el-button icon="el-icon-delete" type="info" size="small" @click="handleClickReset">清除</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-table :data="ag_data" size="small" v-loading="loading" :header-cell-style="{background:'#f2f2f2'}">
        <el-table-column align="center" label="序号" type="index" ></el-table-column>
        <el-table-column align="center" prop="agent_num" label="代理商编号" ></el-table-column>
        <el-table-column align="center" prop="agent_name" label="代理商名称" ></el-table-column>
        <el-table-column align="center" prop="agent_region" label="代理区域" ></el-table-column>
        <el-table-column align="center" prop="respo_name" label="负责人" ></el-table-column>
        <el-table-column align="center" prop="telphone" label="联系方式" ></el-table-column>
        <el-table-column align="center" prop="start_time" label="开通时间" ></el-table-column>
        <el-table-column align="center" label="账号状态">
          <template slot-scope="scope">
            <span :class="scope.row.status === 2 || scope.row.status === 3 || scope.row.status === 4 ? 'err' : ''">{{ scope.row.status === 1 ? '正常' : scope.row.status === 2 ? '停用' : scope.row.status === 3 ? '已过期' : scope.row.status === 4 ? '未生效' : '无' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核状态">
          <template slot-scope="scope">
            <span :class="scope.row.bank_chk_status === 100 ? 'tip' : scope.row.bank_chk_status === 200 ? 'succ' : scope.row.bank_chk_status === -100 ? 'err' : ''">{{ scope.row.bank_chk_status === 0 ? '未提交' : scope.row.bank_chk_status === 100 ? '待审核' : scope.row.bank_chk_status === 200 ? '审核通过' : scope.row.bank_chk_status === -100 ? '审核失败' : '无' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="to(scope.row.agent_num)">修改</el-button>
            <el-button type="text" size="small" @click="addDayNumShow(scope.row.agent_num, scope.row.day_make_code_limit)">配置</el-button>
            <el-button type="text" size="small" class="btn-warning" @click="stop(scope.$index, scope.row.agent_num)" v-if="scope.row.bank_chk_status === 200 && scope.row.status === 1">停用</el-button>
            <el-button type="text" size="small" class="tip" @click="start(scope.$index, scope.row.agent_num)" v-if="scope.row.bank_chk_status === 200 && scope.row.status === 2">开启</el-button>
            <el-button type="text" size="small" class="succ" v-else @click="nextTo('AgentsList',scope.row.agent_num)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
      class="fr page"
      @current-change="handleCurrentChange"
      :current-page.sync="page.currentpage"
      :page-size="page.pageSize"
      layout="total, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
    </el-row>
    <el-dialog title="空码预制" width="400px" :visible.sync="config_show">
      <el-form :model="day_num" inline size="small" :rules="rules" ref="dialog" class="mt20">
        <el-form-item size="small" label="每日可预制数量">
          <el-input type="number" v-model="day_num.num" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"  class="dialog-footer">
        <el-button @click="handleClickCanle">取消</el-button>
        <el-button type="primary" @click="addDayNumPost">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { mapGetters } from 'vuex'
import { init, search, state, page, addDayNum, GetAgentList, GetAgentStatus, myAgentIsSub } from '@/api/myAngent'
export default {
  name: 'my-agents',
  components: {
    Breadcrumb
  },
  data() {
    return {
      day_num: {
        num: '',
        agent_num: ''
      },
      searchForm: {
        agent_name: '',
        sn: '',
        agent_status: '',
        phone: ''
      },
      page: {
        total: 0,
        pageSize: 1,
        currentpage: 1
      },
      ag_data: [],
      name: [],
      status: [],
      show: true,
      is_sub: false,
      loading: true,
      config_show: false,
      rules: {
        num: [{ required: true, trigger: 'blur', message: '必须填写哦~' }]
      }
    }
  },
  methods: {
    to(index) {
      this.$router.push({ name: 'editAgents', query: { id: index }})
    },
    nextTo(name, index) {
      this.$router.push({ name: name, query: { id: index }})
    },
    handleCurrentChange(val) {
      this.loading = true
      page(val, this.searchForm).then(response => {
        this.ag_data = response.data.result.data
        this.page.currentpage = response.data.result.current_page
        this.loading = false
      })
    },
    search() {
      this.loading = true
      search(this.searchForm).then(response => {
        this.ag_data = response.data.result.data
        this.page.total = response.data.result.total
        this.page.currentpage = response.data.result.current_page
        this.loading = false
      })
    },
    stop(index, id) {
      const model = confirm('是否停用该代理商')
      if (model) {
        state(id, 1).then(response => {
          if (response.data.errorCode === 0) {
            this.$message.success('操作成功')
            this.ag_data[index].status = 1
          } else {
            this.$message.error('操作失败')
          }
        })
      }
    },
    start(index, id) {
      state(id, 0).then(response => {
        if (response.data.errorCode === 0) {
          this.$message.success('操作成功')
          this.ag_data[index].status = 0
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    addDayNumShow(agent_num, limit) {
      this.day_num.agent_num = agent_num
      this.day_num.num = limit
      this.config_show = true
    },
    addDayNumPost() {
      this.$refs['dialog'].validate((valid) => {
        if (valid) {
          addDayNum(this.day_num).then(res => {
            if (res.data.errorCode === 0) {
              this.$message.success(res.data.errorMsg)
              this.handleCurrentChange(this.page.currentpage)
              this.config_show = false
            } else {
              this.$message.error(res.data.errorMsg)
            }
          })
        }
      })
    },
    handleClickCanle() {
      this.$refs['dialog'].resetFields()
      this.config_show = false
    },
    handleClickReset() {
      this.$refs['search'].resetFields()
      init(this.id).then(response => {
        this.page.total = response.data.result.total
        this.page.pageSize = response.data.result.per_page
        this.ag_data = response.data.result.data
        this.loading = false
      })
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'roles'
    ])
  },
  mounted() {
    this.roles[0] < 3 ? this.show = true : this.show = false
    init(this.id).then(response => {
      this.page.total = response.data.result.total
      this.page.pageSize = response.data.result.per_page
      this.ag_data = response.data.result.data
      this.loading = false
    })
    myAgentIsSub().then(res => {
      if (res.data.errorCode === 0) {
        res.data.result.is_sub === 1 ? this.is_sub = true : this.is_sub = false
      }
    })
    GetAgentList().then(res => {
      if (res.data.errorCode === 0) {
        this.name = res.data.result
      } else {
        this.$message.error(res.data.errorMsg)
      }
    })
    GetAgentStatus().then(res => {
      if (res.data.errorCode === 0) {
        this.status = res.data.result
      } else {
        this.$message.error(res.data.errorMsg)
      }
    })
  }
}
</script>